
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-stop"></use>
                    </svg>
                    <div class="name">stop</div>
                    <div class="fontclass">#icon-stop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-stop1"></use>
                    </svg>
                    <div class="name">stop</div>
                    <div class="fontclass">#icon-stop1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zaixian"></use>
                    </svg>
                    <div class="name">在线</div>
                    <div class="fontclass">#icon-zaixian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirong"></use>
                    </svg>
                    <div class="name">内容</div>
                    <div class="fontclass">#icon-neirong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-35"></use>
                    </svg>
                    <div class="name">标签</div>
                    <div class="fontclass">#icon-35</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                    <div class="name">暂停</div>
                    <div class="fontclass">#icon-zanting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingweifenxi"></use>
                    </svg>
                    <div class="name">行为分析</div>
                    <div class="fontclass">#icon-xingweifenxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirongjiance"></use>
                    </svg>
                    <div class="name">内容监测</div>
                    <div class="fontclass">#icon-neirongjiance</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxi"></use>
                    </svg>
                    <div class="name">分析</div>
                    <div class="fontclass">#icon-fenxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoqian"></use>
                    </svg>
                    <div class="name">标签</div>
                    <div class="fontclass">#icon-biaoqian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-play"></use>
                    </svg>
                    <div class="name">play</div>
                    <div class="fontclass">#icon-play</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huodong"></use>
                    </svg>
                    <div class="name">活动</div>
                    <div class="fontclass">#icon-huodong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-app"></use>
                    </svg>
                    <div class="name">app</div>
                    <div class="fontclass">#icon-app</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pindao"></use>
                    </svg>
                    <div class="name">频道</div>
                    <div class="fontclass">#icon-pindao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pindao1"></use>
                    </svg>
                    <div class="name">频道</div>
                    <div class="fontclass">#icon-pindao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#icon-gengduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youjiantou"></use>
                    </svg>
                    <div class="name">右箭头</div>
                    <div class="fontclass">#icon-youjiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuojiantou"></use>
                    </svg>
                    <div class="name">左箭头</div>
                    <div class="fontclass">#icon-zuojiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shang"></use>
                    </svg>
                    <div class="name">上</div>
                    <div class="fontclass">#icon-shang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xia"></use>
                    </svg>
                    <div class="name">下</div>
                    <div class="fontclass">#icon-xia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuo"></use>
                    </svg>
                    <div class="name">左</div>
                    <div class="fontclass">#icon-zuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xitongzhuangtai"></use>
                    </svg>
                    <div class="name">系统状态</div>
                    <div class="fontclass">#icon-xitongzhuangtai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-text"></use>
                    </svg>
                    <div class="name">text</div>
                    <div class="fontclass">#icon-text</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huodong1"></use>
                    </svg>
                    <div class="name">活动</div>
                    <div class="fontclass">#icon-huodong1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shebei"></use>
                    </svg>
                    <div class="name">设备</div>
                    <div class="fontclass">#icon-shebei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pindaobofang"></use>
                    </svg>
                    <div class="name">频道播放</div>
                    <div class="fontclass">#icon-pindaobofang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-test"></use>
                    </svg>
                    <div class="name">标签</div>
                    <div class="fontclass">#icon-icon-test</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-fenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ziliaoshouce"></use>
                    </svg>
                    <div class="name">22资料、手册</div>
                    <div class="fontclass">#icon-ziliaoshouce</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuzhijiagoujiekou"></use>
                    </svg>
                    <div class="name">24组织架构、接口</div>
                    <div class="fontclass">#icon-zuzhijiagoujiekou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liaotianduihua"></use>
                    </svg>
                    <div class="name">208聊天、对话</div>
                    <div class="fontclass">#icon-liaotianduihua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liaotianduihua-xianxing"></use>
                    </svg>
                    <div class="name">208聊天、对话-线性</div>
                    <div class="fontclass">#icon-liaotianduihua-xianxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-laba"></use>
                    </svg>
                    <div class="name">212喇叭</div>
                    <div class="fontclass">#icon-laba</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shijian-xianxing"></use>
                    </svg>
                    <div class="name">217时间-线性</div>
                    <div class="fontclass">#icon-shijian-xianxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huaxiangfenxi"></use>
                    </svg>
                    <div class="name">画像分析</div>
                    <div class="fontclass">#icon-huaxiangfenxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shebei1"></use>
                    </svg>
                    <div class="name">设备</div>
                    <div class="fontclass">#icon-shebei1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diantai"></use>
                    </svg>
                    <div class="name">电台</div>
                    <div class="fontclass">#icon-diantai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diantai1"></use>
                    </svg>
                    <div class="name">电台</div>
                    <div class="fontclass">#icon-diantai1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dadiantai"></use>
                    </svg>
                    <div class="name">大电台</div>
                    <div class="fontclass">#icon-dadiantai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diantaishezhi"></use>
                    </svg>
                    <div class="name">电台设置</div>
                    <div class="fontclass">#icon-diantaishezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinggao"></use>
                    </svg>
                    <div class="name">警告</div>
                    <div class="fontclass">#icon-jinggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghaoquanxianguanli"></use>
                    </svg>
                    <div class="name">账号权限管理</div>
                    <div class="fontclass">#icon-zhanghaoquanxianguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vynil"></use>
                    </svg>
                    <div class="name">音乐</div>
                    <div class="fontclass">#icon-vynil</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoqian1"></use>
                    </svg>
                    <div class="name">标签</div>
                    <div class="fontclass">#icon-biaoqian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuju"></use>
                    </svg>
                    <div class="name">数据</div>
                    <div class="fontclass">#icon-shuju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanbi"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#icon-guanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_renwujincheng"></use>
                    </svg>
                    <div class="name">icon_任务进程</div>
                    <div class="fontclass">#icon-icon_renwujincheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_yiwenkongxin"></use>
                    </svg>
                    <div class="name">icon_疑问空心</div>
                    <div class="fontclass">#icon-icon_yiwenkongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_tianjia"></use>
                    </svg>
                    <div class="name">icon_添加</div>
                    <div class="fontclass">#icon-icon_tianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongyezujian-kaiguan"></use>
                    </svg>
                    <div class="name">工业组件-开关</div>
                    <div class="fontclass">#icon-gongyezujian-kaiguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiao-zhuzhuangtu"></use>
                    </svg>
                    <div class="name">图表-柱状图</div>
                    <div class="fontclass">#icon-tubiao-zhuzhuangtu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingzhuang-tupian"></use>
                    </svg>
                    <div class="name">形状-图片</div>
                    <div class="fontclass">#icon-xingzhuang-tupian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shengmingxianjilu"></use>
                    </svg>
                    <div class="name">生命线记录</div>
                    <div class="fontclass">#icon-shengmingxianjilu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-play1"></use>
                    </svg>
                    <div class="name">play</div>
                    <div class="fontclass">#icon-play1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lishi"></use>
                    </svg>
                    <div class="name">历史</div>
                    <div class="fontclass">#icon-lishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-check-circle"></use>
                    </svg>
                    <div class="name">check-circle</div>
                    <div class="fontclass">#icon-check-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close-circle"></use>
                    </svg>
                    <div class="name">close-circle</div>
                    <div class="fontclass">#icon-close-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-frown"></use>
                    </svg>
                    <div class="name">frown</div>
                    <div class="fontclass">#icon-frown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-left-circle"></use>
                    </svg>
                    <div class="name">left-circle</div>
                    <div class="fontclass">#icon-left-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-down-circle"></use>
                    </svg>
                    <div class="name">down-circle</div>
                    <div class="fontclass">#icon-down-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-minus-circle"></use>
                    </svg>
                    <div class="name">minus-circle</div>
                    <div class="fontclass">#icon-minus-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plus-circle"></use>
                    </svg>
                    <div class="name">plus-circle</div>
                    <div class="fontclass">#icon-plus-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-play-circle"></use>
                    </svg>
                    <div class="name">play-circle</div>
                    <div class="fontclass">#icon-play-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-question-circle"></use>
                    </svg>
                    <div class="name">question-circle</div>
                    <div class="fontclass">#icon-question-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right-circle"></use>
                    </svg>
                    <div class="name">right-circle</div>
                    <div class="fontclass">#icon-right-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-smile"></use>
                    </svg>
                    <div class="name">smile</div>
                    <div class="fontclass">#icon-smile</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-time-circle"></use>
                    </svg>
                    <div class="name">time-circle</div>
                    <div class="fontclass">#icon-time-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-timeout"></use>
                    </svg>
                    <div class="name">time out</div>
                    <div class="fontclass">#icon-timeout</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-up-circle"></use>
                    </svg>
                    <div class="name">up-circle</div>
                    <div class="fontclass">#icon-up-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sync"></use>
                    </svg>
                    <div class="name">sync</div>
                    <div class="fontclass">#icon-sync</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-transaction"></use>
                    </svg>
                    <div class="name">transaction</div>
                    <div class="fontclass">#icon-transaction</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reloadtime"></use>
                    </svg>
                    <div class="name">reload time</div>
                    <div class="fontclass">#icon-reloadtime</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-message"></use>
                    </svg>
                    <div class="name">message</div>
                    <div class="fontclass">#icon-message</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dashboard"></use>
                    </svg>
                    <div class="name">dashboard</div>
                    <div class="fontclass">#icon-dashboard</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-issuesclose"></use>
                    </svg>
                    <div class="name">issues close</div>
                    <div class="fontclass">#icon-issuesclose</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-poweroff"></use>
                    </svg>
                    <div class="name">poweroff</div>
                    <div class="fontclass">#icon-poweroff</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-logout"></use>
                    </svg>
                    <div class="name">logout</div>
                    <div class="fontclass">#icon-logout</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-login"></use>
                    </svg>
                    <div class="name">login</div>
                    <div class="fontclass">#icon-login</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-piechart"></use>
                    </svg>
                    <div class="name">pie chart</div>
                    <div class="fontclass">#icon-piechart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-setting"></use>
                    </svg>
                    <div class="name">setting</div>
                    <div class="fontclass">#icon-setting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-eye"></use>
                    </svg>
                    <div class="name">eye</div>
                    <div class="fontclass">#icon-eye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location"></use>
                    </svg>
                    <div class="name">location</div>
                    <div class="fontclass">#icon-location</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-adduser"></use>
                    </svg>
                    <div class="name">add user</div>
                    <div class="fontclass">#icon-adduser</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-addteam"></use>
                    </svg>
                    <div class="name">addteam</div>
                    <div class="fontclass">#icon-addteam</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                    <div class="name">user</div>
                    <div class="fontclass">#icon-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-team"></use>
                    </svg>
                    <div class="name">team</div>
                    <div class="fontclass">#icon-team</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-like"></use>
                    </svg>
                    <div class="name">like</div>
                    <div class="fontclass">#icon-like</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unlike"></use>
                    </svg>
                    <div class="name">unlike</div>
                    <div class="fontclass">#icon-unlike</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-medicinebox"></use>
                    </svg>
                    <div class="name">medicinebox</div>
                    <div class="fontclass">#icon-medicinebox</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-folder-open"></use>
                    </svg>
                    <div class="name">folder-open</div>
                    <div class="fontclass">#icon-folder-open</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-scan"></use>
                    </svg>
                    <div class="name">scan</div>
                    <div class="fontclass">#icon-scan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-barcode"></use>
                    </svg>
                    <div class="name">barcode</div>
                    <div class="fontclass">#icon-barcode</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera"></use>
                    </svg>
                    <div class="name">camera</div>
                    <div class="fontclass">#icon-camera</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cloud-upload"></use>
                    </svg>
                    <div class="name">cloud-upload</div>
                    <div class="fontclass">#icon-cloud-upload</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cloud-download"></use>
                    </svg>
                    <div class="name">cloud-download</div>
                    <div class="fontclass">#icon-cloud-download</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fund"></use>
                    </svg>
                    <div class="name">fund</div>
                    <div class="fontclass">#icon-fund</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image"></use>
                    </svg>
                    <div class="name">image</div>
                    <div class="fontclass">#icon-image</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star"></use>
                    </svg>
                    <div class="name">star</div>
                    <div class="fontclass">#icon-star</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wifi"></use>
                    </svg>
                    <div class="name">wifi</div>
                    <div class="fontclass">#icon-wifi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-attachment"></use>
                    </svg>
                    <div class="name">attachment</div>
                    <div class="fontclass">#icon-attachment</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shrink"></use>
                    </svg>
                    <div class="name">shrink</div>
                    <div class="fontclass">#icon-shrink</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrawsalt"></use>
                    </svg>
                    <div class="name">arrawsalt</div>
                    <div class="fontclass">#icon-arrawsalt</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-verticalright"></use>
                    </svg>
                    <div class="name">vertical right</div>
                    <div class="fontclass">#icon-verticalright</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-verticalleft"></use>
                    </svg>
                    <div class="name">vertical left</div>
                    <div class="fontclass">#icon-verticalleft</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                    <div class="name">right</div>
                    <div class="fontclass">#icon-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-left"></use>
                    </svg>
                    <div class="name">left</div>
                    <div class="fontclass">#icon-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-up"></use>
                    </svg>
                    <div class="name">up</div>
                    <div class="fontclass">#icon-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-down"></use>
                    </svg>
                    <div class="name">down</div>
                    <div class="fontclass">#icon-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fullscreen"></use>
                    </svg>
                    <div class="name">fullscreen</div>
                    <div class="fontclass">#icon-fullscreen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fullscreen-exit"></use>
                    </svg>
                    <div class="name">fullscreen-exit</div>
                    <div class="fontclass">#icon-fullscreen-exit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowright"></use>
                    </svg>
                    <div class="name">arrowright</div>
                    <div class="fontclass">#icon-arrowright</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowup"></use>
                    </svg>
                    <div class="name">arrowup</div>
                    <div class="fontclass">#icon-arrowup</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowleft"></use>
                    </svg>
                    <div class="name">arrowleft</div>
                    <div class="fontclass">#icon-arrowleft</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowdown"></use>
                    </svg>
                    <div class="name">arrowdown</div>
                    <div class="fontclass">#icon-arrowdown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-upload"></use>
                    </svg>
                    <div class="name">upload</div>
                    <div class="fontclass">#icon-upload</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-stock"></use>
                    </svg>
                    <div class="name">stock</div>
                    <div class="fontclass">#icon-stock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rise"></use>
                    </svg>
                    <div class="name">rise</div>
                    <div class="fontclass">#icon-rise</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-indent"></use>
                    </svg>
                    <div class="name">indent</div>
                    <div class="fontclass">#icon-indent</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-menu"></use>
                    </svg>
                    <div class="name">menu</div>
                    <div class="fontclass">#icon-menu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unorderedlist"></use>
                    </svg>
                    <div class="name">unordered list</div>
                    <div class="fontclass">#icon-unorderedlist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-orderedlist"></use>
                    </svg>
                    <div class="name">ordered list</div>
                    <div class="fontclass">#icon-orderedlist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-align-right"></use>
                    </svg>
                    <div class="name">align-right</div>
                    <div class="fontclass">#icon-align-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-align-center"></use>
                    </svg>
                    <div class="name">align-center</div>
                    <div class="fontclass">#icon-align-center</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bg-colors"></use>
                    </svg>
                    <div class="name">bg-colors</div>
                    <div class="fontclass">#icon-bg-colors</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lishi1"></use>
                    </svg>
                    <div class="name">历史</div>
                    <div class="fontclass">#icon-lishi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shishi"></use>
                    </svg>
                    <div class="name">实时</div>
                    <div class="fontclass">#icon-shishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-frown-fill"></use>
                    </svg>
                    <div class="name">frown-fill</div>
                    <div class="fontclass">#icon-frown-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-smile-fill"></use>
                    </svg>
                    <div class="name">smile-fill</div>
                    <div class="fontclass">#icon-smile-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diff-fill"></use>
                    </svg>
                    <div class="name">diff-fill</div>
                    <div class="fontclass">#icon-diff-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-file-copy-fill"></use>
                    </svg>
                    <div class="name">file-copy-fill</div>
                    <div class="fontclass">#icon-file-copy-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-snippets-fill"></use>
                    </svg>
                    <div class="name">snippets-fill</div>
                    <div class="fontclass">#icon-snippets-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-batchfolding-fill"></use>
                    </svg>
                    <div class="name">batch folding-fill</div>
                    <div class="fontclass">#icon-batchfolding-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reconciliation-fill"></use>
                    </svg>
                    <div class="name">reconciliation-fill</div>
                    <div class="fontclass">#icon-reconciliation-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-folder-add-fill"></use>
                    </svg>
                    <div class="name">folder-add-fill</div>
                    <div class="fontclass">#icon-folder-add-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-folder-fill"></use>
                    </svg>
                    <div class="name">folder-fill</div>
                    <div class="fontclass">#icon-folder-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-folder-open-fill"></use>
                    </svg>
                    <div class="name">folder-open-fill</div>
                    <div class="fontclass">#icon-folder-open-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-database-fill"></use>
                    </svg>
                    <div class="name">database-fill</div>
                    <div class="fontclass">#icon-database-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-calendar-check-fill"></use>
                    </svg>
                    <div class="name">calendar-check-fill</div>
                    <div class="fontclass">#icon-calendar-check-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image-fill"></use>
                    </svg>
                    <div class="name">image-fill</div>
                    <div class="fontclass">#icon-image-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-idcard-fill"></use>
                    </svg>
                    <div class="name">id card-fill</div>
                    <div class="fontclass">#icon-idcard-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-creditcard-fill"></use>
                    </svg>
                    <div class="name">credit card-fill</div>
                    <div class="fontclass">#icon-creditcard-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fund-fill"></use>
                    </svg>
                    <div class="name">fund-fill</div>
                    <div class="fontclass">#icon-fund-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-read-fill"></use>
                    </svg>
                    <div class="name">read-fill</div>
                    <div class="fontclass">#icon-read-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-contacts-fill"></use>
                    </svg>
                    <div class="name">contacts-fill</div>
                    <div class="fontclass">#icon-contacts-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moneycollect-fill"></use>
                    </svg>
                    <div class="name">money collect-fill</div>
                    <div class="fontclass">#icon-moneycollect-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sound-fill"></use>
                    </svg>
                    <div class="name">sound-fill</div>
                    <div class="fontclass">#icon-sound-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location-fill"></use>
                    </svg>
                    <div class="name">location-fill</div>
                    <div class="fontclass">#icon-location-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cloud-fill"></use>
                    </svg>
                    <div class="name">cloud-fill</div>
                    <div class="fontclass">#icon-cloud-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unlike-fill"></use>
                    </svg>
                    <div class="name">unlike-fill</div>
                    <div class="fontclass">#icon-unlike-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star-fill"></use>
                    </svg>
                    <div class="name">star-fill</div>
                    <div class="fontclass">#icon-star-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unlock-fill"></use>
                    </svg>
                    <div class="name">unlock-fill</div>
                    <div class="fontclass">#icon-unlock-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-thunderbolt-fill"></use>
                    </svg>
                    <div class="name">thunderbolt-fill</div>
                    <div class="fontclass">#icon-thunderbolt-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag-fill"></use>
                    </svg>
                    <div class="name">tag-fill</div>
                    <div class="fontclass">#icon-tag-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wrench-fill"></use>
                    </svg>
                    <div class="name">wrench-fill</div>
                    <div class="fontclass">#icon-wrench-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tags-fill"></use>
                    </svg>
                    <div class="name">tags-fill</div>
                    <div class="fontclass">#icon-tags-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bank-fill"></use>
                    </svg>
                    <div class="name">bank-fill</div>
                    <div class="fontclass">#icon-bank-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera-fill"></use>
                    </svg>
                    <div class="name">camera-fill</div>
                    <div class="fontclass">#icon-camera-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mail-fill"></use>
                    </svg>
                    <div class="name">mail-fill</div>
                    <div class="fontclass">#icon-mail-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-car-fill"></use>
                    </svg>
                    <div class="name">car-fill</div>
                    <div class="fontclass">#icon-car-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-setting-fill"></use>
                    </svg>
                    <div class="name">setting-fill</div>
                    <div class="fontclass">#icon-setting-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-apple"></use>
                    </svg>
                    <div class="name">apple</div>
                    <div class="fontclass">#icon-apple</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-android"></use>
                    </svg>
                    <div class="name">android</div>
                    <div class="fontclass">#icon-android</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-android-fill"></use>
                    </svg>
                    <div class="name">android-fill</div>
                    <div class="fontclass">#icon-android-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-apple-fill"></use>
                    </svg>
                    <div class="name">apple-fill</div>
                    <div class="fontclass">#icon-apple-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-HTML-fill"></use>
                    </svg>
                    <div class="name">HTML5-fill</div>
                    <div class="fontclass">#icon-HTML-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-windows-fill"></use>
                    </svg>
                    <div class="name">windows-fill</div>
                    <div class="fontclass">#icon-windows-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-twitter"></use>
                    </svg>
                    <div class="name">twitter</div>
                    <div class="fontclass">#icon-twitter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-svg-"></use>
                    </svg>
                    <div class="name">留存分析</div>
                    <div class="fontclass">#icon-svg-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shujuwajue"></use>
                    </svg>
                    <div class="name">数据挖掘</div>
                    <div class="fontclass">#icon-shujuwajue</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
